<template>
  <div class="comment">
    <detailSection title="热门评论" :more="`查看全部${comment.totalCount}条评论`">
      <template #content>
        <div class="comment-inner">
          <div class="header">
            <div class="left">
              <div class="score">
                <span class="text">{{ comment.overall }}</span>
                <div class="line"></div>
              </div>
              <div class="info">
                <div class="title">{{ comment.scoreTitle }}</div>
                <div class="count">{{ comment.totalCount }}条评论</div>
                <div class="star">
                  <van-rate v-model="comment.overall" readonly allow-half size="14px" color="#ff9854" />
                </div>
              </div>

            </div>
            <div class="right">
              <template v-for="(item, index) in comment.subScores">
                <div class="item">
                  {{ item }}
                </div>
              </template>
            </div>
          </div>
          <div class="tags">
            <template v-for="(tag, index) in comment.commentTagVo">
              <div class="tag" :style="{ color: tag.color, backgroundColor: tag.backgroundColor }">
                {{ tag.text }}
              </div>
            </template>
          </div>
          <div class="content">
            <div class="user">
              <div class="left">
                <img :src="comment.comment.userAvatars" alt="">
              </div>
              <div class="right">
                <div class="userName">{{ comment.comment.userName }}</div>
                <div class="date">{{ comment.comment.checkInDate }}</div>
              </div>
            </div>
            <div class="text">
              {{ comment.comment.commentDetail }}
            </div>
          </div>
        </div>
      </template>
    </detailSection>
  </div>
</template>

<script setup>
import detailSection from "@/components/detail-section/detail-section.vue"
import { ref } from 'vue';
const props = defineProps({
  comment: {
    type: Object,
    default: () => ({})
  }
})

const total = ref(30)
</script>

<style lang="less" scoped>
.comment {
  .comment-inner {
    .header {
      display: flex;
      justify-content: space-between;

      .left {
        position: relative;
        display: flex;

        .score {
          .text {
            font-size: 50px;
            font-weight: 700;
            color: #000
          }

          .line {
            width: 66px;
            height: 6px;
            background: linear-gradient(90deg, #fa8c1d, #fcaf3f);
            border-radius: 3px;
            position: absolute;
            bottom: 4px;
            z-index: 5;
          }
        }

        .info {
          margin-left: 19px;
          font-size: 12px;
          color: #333;

          .count {
            margin: 3px 0;
            color: #999;
          }
        }
      }

      .right {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        justify-content: flex-end;

        .item {
          margin-left: 5px;
          font-size: 12px;
          color: #666;
        }
      }
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      margin: 10px 0;

      .tag {
        padding: 3px 5px;
        margin-right: 8px;
        margin-top: 5px;
        border-radius: 8px;
        font-size: 12px;
      }
    }

    .content {
      padding: 10px;
      border-radius: 6px;
      background-color: #f7f9fb;

      .user {
        display: flex;

        .left {
          img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }
        }

        .right {
          margin-left: 10px;

          .userName {
            font-size: 14px
          }

          .date {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
          }
        }
      }

      .text {
        color: #333;
        font-size: 12px;
        line-height: 16px;
        margin-top: 16px;
      }
    }
  }
}
</style>